<template>
	<view class="u-page change-page">
		<scroll-view scroll-x style="background-color: #2979ff;" class="nav" scroll-with-animation
			:scroll-left="scrollLeft">
			<view class="cu-item" :style="{color:(item.type==typeCur?'#ffffff':'#afdbff')}"
				:class="item.type==typeCur?'cur':''" v-for="(item,index) in changeIteam" :key="index" @tap="typeSelect"
				:data-id="index" :data-type="item.type">
				{{item.name}}
			</view>
		</scroll-view>
		<!-- 公司选择 -->
		<view class="change-item" v-show="typeCur==='XG'">
			<u-sticky>
				<view class="search">
					<u-search placeholder="公司名称" v-model="company" border-color="#2979ff" @search="search()"
						@custom="search()" :action-style="{'background-image': 'linear-gradient(45deg, #1cbbb4, #0081ff)','color': '#ffffff','height': '64rpx',
					'line-height': '64rpx','border-radius': '10rpx','width':'120rpx'}"></u-search>
				</view>
			</u-sticky>
			<view class="cu-list menu-avatar">
				<view class="cu-item" style="padding-right: 0rpx;" v-for="i in info" :key="i.id">
					<view style="left: 20rpx;width: calc(100% - 40rpx - 120rpx);line-height: 1.6em;">
						<view class="text-grey text-cut">{{i.name}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								{{i.credit_no}}
							</view>
						</view>
					</view>
					<view class="action" style="width: 140rpx;">
						<button class="cu-btn bg-gradual-red text-white" style="width: 120rpx;"
							@click="change_to(i)">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 名称变更 -->
		<view class="change-item" v-show="typeCur==='MC'">
			<u-form ref="mcForm" label-width="200" :error-type="['border-bottom']">
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 公司名称
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="A.value" placeholder="公司名称" class="content_input" />
					</view>
				</view>
			</u-form>
		</view>
		<!-- 地址变更 -->
		<view class="change-item" v-show="typeCur==='DZ'">
			<u-form ref="dzForm" label-width="200" :error-type="['border-bottom']">
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 公司住所
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="B.value" placeholder="公司住所" class="content_input" />
					</view>
					<view style="display: flex;">
						<u-input v-model="B.area" placeholder="面积" class="content_input" type="digit"
							style="width: 87%;" />
						<view style="display:flex;align-items: center; text-align: center;">平方米</view>
					</view>
					<view class="change_content">
						<u-input v-model="B.houseOwnerUsername" placeholder="房屋所有权人名称" class="content_input" />
					</view>
					<view class="change_content">
						<u-input v-model="B.houseOwnerMobile" placeholder="房屋所有权人联系电话" class="content_input" />
					</view>
				</view>
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 经营场所
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="C.value" placeholder="经营场所" class="content_input" />
					</view>
					<view style="display: flex;">
						<u-input v-model="C.area" placeholder="面积" class="content_input" type="digit"
							style="width: 87%;" />
						<view style="display:flex;align-items: center; text-align: center;">平方米</view>
					</view>
					<view class="change_content">
						<u-input v-model="C.isFilingAddress" type="select" :border="false" :select-open="adr_open"
							@click="adr_show = true;adr_open=true" class="content_input" />
						<u-action-sheet :list="addressOption" :safe-area-inset-bottom="true" :mask-close-able="false"
							v-model="adr_show" @click="adrCallback" @close="adrClose"></u-action-sheet>
					</view>
					<view class="change_content">
						<u-input v-model="C.houseOwnerUsername" placeholder="房屋所有权人名称" class="content_input" />
					</view>
					<view class="change_content">
						<u-input v-model="C.houseOwnerMobile" placeholder="房屋所有权人联系电话" class="content_input" />
					</view>
				</view>
			</u-form>
		</view>
		<!-- 注册资本 -->
		<view class="change-item" v-show="typeCur==='ZC'">
			<u-form ref="zcForm" label-width="200" :error-type="['border-bottom']">
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 注册资本
						</view>
					</view>
					<view style="display: flex;">
						<u-input v-model="D.value" placeholder="注册资本" class="content_input" type="digit"
							style="width: 90%;" />
						<view style="display:flex;align-items: center; text-align: center;">万元</view>
					</view>
				</view>
			</u-form>
		</view>
		<!-- 出资日期 -->
		<view class="change-item" v-show="typeCur==='CZ'">
			<u-form ref="czForm" label-width="200" :error-type="['border-bottom']">
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 出资日期
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="J.value" type="select" placeholder="选择日期" :border="false"
							:select-open="date_open" @click="date_show = true;date_open=true" class="content_input" />
						<u-calendar v-model="date_show" mode="date" :safe-area-inset-bottom="true"></u-calendar>
					</view>
				</view>
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 出资期限
						</view>
					</view>
					<view style="display: flex;">
						<u-input v-model="G.value" placeholder="出资期限" class="content_input" type="number"
							style="width: 93%;" />
						<view style="display:flex;align-items: center; text-align: center;">年</view>
					</view>
				</view>
			</u-form>
		</view>
		<!-- 经营范围 -->
		<view class="change-item" v-show="typeCur==='JY'">
			<u-form ref="jyForm" label-width="200" :error-type="['border-bottom']">
				<view class="c-item">
					<view class="cu-bar bg-white card_title change_view">
						<view class="action change_item">
							<text class="cuIcon-title text-orange"></text> 经营范围
						</view>
					</view>
					<view class="change_content">
						<u-input v-model="E.value" type="textarea" placeholder="经营范围" class="content_input" />
					</view>
				</view>
			</u-form>
		</view>
		<!-- 
		<view class="c-item" v-if="changeList[5].checked" prop="legal">
			<view class="cu-bar bg-white card_title change_view">
				<view class="action change_item">
					<text class="cuIcon-title text-orange"></text> 法定代表人
				</view>
			</view>
			<view class="change_content">
				<u-input v-model="changeList[5].value" placeholder="法定代表人姓名" class="content_input"/>
				<u-input v-model="changeList[5].legal_card" placeholder="法定代表人身份证" type="idcard" class="content_input"/>
				<u-input v-model="changeList[5].legal_address" placeholder="法定代表人身份证地址" class="content_input"/>
			</view>
		</view>
		<view class="c-item" v-if="changeList[7].checked" prop="manager">
			<view class="cu-bar bg-white card_title change_view">
				<view class="action change_item">
					<text class="cuIcon-title text-orange"></text> 监事
				</view>
			</view>
			<view class="change_content">
				<u-input v-model="changeList[7].value" placeholder="监事姓名" class="content_input"/>
				<u-input v-model="changeList[7].legal_card" placeholder="监事身份证" type="idcard" class="content_input"/>
			</view>
		</view>
		<view class="c-item" v-if="changeList[8].checked" v-for="item,index in change.capital" :key="index">
			<view class="cu-bar bg-white card_title change_view">
				<view class="action change_item">
					<text class="cuIcon-title text-orange"></text> 股东
				</view>
			</view>
			<view class="change_content">
				<u-input v-model="item.name" placeholder="股东姓名" class="content_input"/>
				<u-input v-model="item.card" placeholder="股东身份证" type="idcard" class="content_input"/>
				<view style="display: flex;">
					<u-input v-model="item.money"
					 placeholder="出资额" class="content_input"
					 style="width: 90%;"/>
					<view style="display:flex;align-items: center; text-align: center;">万元</view>
				</view>
				<u-input v-model="item.time" placeholder="出资日期" class="content_input"/>
				<view style="display: flex;">
				<u-input v-model="item.ratio" 
				placeholder="出资比例" class="content_input" style="width: 90%;"/>
				<view style="display:flex;align-items: center; text-align: center;">%</view>
				</view>
				<u-action-sheet :list="positionList" :v-model="true" @click=""></u-action-sheet>
			</view>
		</view>
		
		<view class="c-item" v-if="changeList[4].checked">
			<view class="cu-bar bg-white card_title change_view">
				<view class="action change_item">
					<text class="cuIcon-title text-orange"></text> 经营范围
				</view>
			</view>
			<u-input v-model="changeList[4].value" type="textarea" placeholder="经营范围" class="content_input"/>
		</view>
		<view class="c-item" v-if="changeList[6].checked">
			<view class="cu-bar bg-white card_title change_view">
				<view class="action change_item">
					<text class="cuIcon-title text-orange"></text> 营业期限
				</view>
			</view>
			<view style="display: flex;">
				<u-input v-model="changeList[6].value"
				 placeholder="营业期限" class="content_input" type="number"
				 style="width: 93%;"/>
				<view style="display:flex;align-items: center; text-align: center;">年</view>
			</view>
		</view>
		<view class="c-item" v-if="changeList[9].checked">
			<view class="cu-bar bg-white card_title change_view">
				<view class="action change_item">
					<text class="cuIcon-title text-orange"></text> 认缴出资日期
				</view>
			</view>
			<u-input v-model="changeList[9].value" placeholder="认缴出资日期" class="content_input"/>
		</view> -->
		<view class="change-button">
			<u-button @click="preview" type="primary">下一步</u-button>
		</view>
		<u-popup v-model="preview_flag" 
		mode="left" 
		length="100%" 
		:safe-area-inset-bottom="true"
		:closeable="true">
			<view class="perview_content">
				<view class="cu-timeline">
					<view class="cu-time">选择公司</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							厦门君澄网络科技有限公司
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">地址变更</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							厦门市思明区
						</view>
					</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							厦门市思明区
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">选择公司</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							懂我要做什么就行
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">选择公司</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							懂我要做什么就行
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">选择公司</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							懂我要做什么就行
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">选择公司</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							懂我要做什么就行
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">选择公司</view>
					<view class="cu-item text-blue">
						<view class="bg-blue content">
							懂我要做什么就行
						</view>
					</view>
				</view>
				<view class="cu-timeline">
					<view style="padding: 40rpx 0rpx;width: 105%;">
						<u-button @click="submit" type="success">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				company: '',
				adr_show: false,
				adr_open: false,
				date_show: false,
				date_open: false,
				preview_flag: false,
				typeCur: 'XG',
				info: [

				],
				scrollLeft: 0,
				addressOption: [{
						text: '经营场所已备案'
					},
					{
						text: '经营场所无备案'
					}
				],
				companyId: '',
				companyName: '',
				operName: '',
				companyCode: '',
				companyStaus: '',
				changeIteam: [],
				A: { // 公司名称
					selected: false,
					value: ''
				},
				B: { // 公司住所
					selected: false,
					value: '',
					area: '',
					houseOwnerUsername:'',
					houseOwnerMobile:''
				},
				C: { // 公司经营场所
					selected: false,
					value: '',
					area: '',
					isFilingAddress: '经营场所已备案',
					houseOwnerUsername:'',
					houseOwnerMobile:''
				},
				D: { // 注册资本
					selected: false,
					value: ''
				},
				E: { // 经营范围
					selected: false,
					value: ''
				},
				F: { // 法定代表人
					selected: false,
					value: ''
				},
				G: { // 出资期限
					selected: false,
					value: ''
				},
				H: { // 监事
					selected: false,
					value: ''
				},
				I: { // 股东
					selected: false,
					value: ''
				},
				J: { // 出资日期
					selected: false,
					value: ''
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.changeIteam = [{
				type: 'XG',
				name: "选择公司",
				flag: false
			}];
			let type = option.type.split(",");
			for (let t in type) {
				if (type[t] === 'GD') {
					this.changeIteam.push({
						type: 'GD',
						name: "股东变更",
						flag: false
					})
				} else if (type[t] === 'GG') {
					this.changeIteam.push({
						type: 'GG',
						name: "高管变更",
						flag: false
					})
				} else if (type[t] === 'DZ') {
					this.changeIteam.push({
						type: 'DZ',
						name: "地址变更",
						flag: false
					})
				} else if (type[t] === 'MC') {
					this.changeIteam.push({
						type: 'MC',
						name: "名称变更",
						flag: false
					})
				} else if (type[t] === 'JY') {
					this.changeIteam.push({
						type: 'JY',
						name: "经营范围",
						flag: false
					})
				} else if (type[t] === 'ZC') {
					this.changeIteam.push({
						type: 'ZC',
						name: "注册资本",
						flag: false
					})
				} else if (type[t] === 'CZ') {
					this.changeIteam.push({
						type: 'CZ',
						name: "出资时间",
						flag: false
					})
				}
			}
		},
		methods: {
			typeSelect(e) {
				this.typeCur = e.currentTarget.dataset.type;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 点击actionSheet回调
			adrCallback(index) {
				this.C.isFilingAddress = this.addressOption[index].text;
				this.adr_open = false;
			},
			adrClose() {
				this.adr_open = false;
			},
			change_to(row) {

			},
			preview() {
				this.preview_flag = true
			},
			search(v) {
				if (this.company.length < 4) {
					uni.showToast({
						title: '公司名称过短',
						icon: 'none',
						duration: 1000
					});
					return
				}
				uni.showLoading({
					title: '搜索中...'
				});
				this.$H.post("/homeapi/search", {
					keywords: this.company
				}, {}).then(res => {
					uni.hideLoading();
					if (res.data != null) {
						this.info = res.data;
					}
					if (this.info.length === 0) {
						uni.showToast({
							title: '无匹配数据',
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '搜索失败',
						icon: 'none',
						duration: 1000
					});
				})
			},
			submit() {
				let _that = this;
				let changCategory = [];
				for (let i = 0; i < this.changeList.length; i++) {
					if (this.changeList[i].checked) {
						changCategory.push(this.changeList[i])
					}
				}
				uni.showLoading({
					title: '文件生成中',
					mask: true,
					success: (success) => {
						let param = {
							companyId: 7,
							changCategory: changCategory
						};
						_that.$H.post("/homeapi/change", param, {}).then(res => {
							if (res.code === 1) {
								let file = res.data.file;
								uni.downloadFile({
									url: file,
									success: function(res) {
										uni.hideLoading();
										var filePath = res.tempFilePath;
										uni.openDocument({
											filePath: filePath,
											showMenu: true, // 允许出现分享功能
											success: function(res) {
												uni.showToast({
													title: '文件生成成功，点击右上角分享',
													duration: 1000
												});
											}
										});
									},
									fail: function(res) {
										uni.hideLoading();
										uni.showToast({
											title: '文件生成失败',
											icon: 'none',
											duration: 1000
										});
									}
								});
							} else {
								setTimeout(function() {
									uni.hideLoading();
									uni.showToast({
										title: '文件生成失败',
										icon: 'none',
										duration: 2000
									});
								}, 1000);
							}
						}).catch(err => {
							setTimeout(function() {
								uni.hideLoading();
								uni.showToast({
									title: '文件生成失败',
									icon: 'none',
									duration: 2000
								});
							}, 1000);
						})
					}
				});
			}
		}
	}
</script>

<style>
	.change-page {
		display: flex;
		flex-direction: column;
	}

	.change-item {
		padding: 30rpx 30rpx 40px 30rpx;
	}

	.c-item {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		flex-direction: column;
	}

	.c-item u-form-item {
		width: 85%;
	}

	.icon-size {
		font-size: 50rpx !important;
	}

	.change-info {
		padding: 20rpx 30rpx;
		background-color: #2979ff;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}

	.change-button {
		position: fixed;
		z-index: 9999;
		bottom: 0;
		width: 100%;
	}

	.change-button u-button button {
		border-radius: 0rpx;
	}

	.change_view {
		min-height: 50rpx;
	}

	.c-item .change_view .change_item {
		margin-left: 0rpx;
	}

	.content_input .u-input input {
		min-height: 100rpx !important;
	}

	.search {
		padding: 10rpx;
		background-color: #FFFFFF;
	}
	
	.perview_content{
		padding: 40rpx 80rpx 40rpx 40rpx;
	}
</style>
